<template>
    <div class="cmdcfg">
        <el-row>
            <div>
                <i class="el-icon-plus blue" title="添加子命令" @click="addSubCmd" ></i>
                <exSelect v-model="iftype" label="条件类型" :dictList="typeList" size="mini" elstyle="width:100px;min-width:100px"></exSelect>
                <exInput v-model="ifreg" label="表达式" width="130" size="mini" v-if="selType.ifreg"></exInput>
                <template  v-if="selType.ifInclude">
                    <exSwitch v-model="ifInclude"></exSwitch>{{ifInclude?"包含":"不包含"}}
                </template>
                <span v-if="isMatch">{{isMatch==1?"符合":"不符合"}} {{desc}}</span>
            </div>
            <div class="ml20">
                <exInput v-model="remark" label="备注" width="430" size="mini"></exInput>
            </div>
            <div class="ml20">
                <exInput v-model.number="x1" label="x1" width="75" size="mini" v-if="selType.x1"></exInput>
                <exInput v-model.number="y1" label="y1" width="75" size="mini" v-if="selType.y1"></exInput>
                <exInput v-model.number="operWait" label="回调等待时间" width="100" size="mini"></exInput>

                
            </div>
            <div class="ml20">
                <exInput v-model.number="iffix" label="兼容值" width="60" size="mini" v-if="selType.iffix"></exInput>
                <exInput v-model.number="ifHeightFix" label="高度误差" width="80" size="mini" v-if="selType.ifHeightFix"></exInput>
                
                <el-tooltip class="item" effect="light" placement="bottom" v-show="selType.colors" >
                    <div slot="content"> 
                        <el-row style="word-break: break-all;display:inline-block;max-width:500px;">
                            {{colors}}
                        </el-row>
                        <canvasCmp :colors="colors" :type.sync="selType.type"></canvasCmp>
                        <el-row>获取到的数据:</el-row>
                        <canvasCmp :colors="getColor" :type.sync="selType.type"></canvasCmp>
                        <el-row style="word-break: break-all;display:inline-block;max-width:500px;">
                            {{getColor}}
                        </el-row>
                    </div>
                    <el-link type="primary">颜色数据({{colors.length}})
                        <canvasCmp :colors="colors" :type.sync="selType.type"></canvasCmp>
                    </el-link>
                </el-tooltip>
                <!-- <exInput v-model="colors" label="颜色数组" width="220" size="mini" v-if="selType.colors"></exInput> -->
            </div>

        </el-row>
    </div>
</template>


<script>
import canvasCmp from "./util/canvasCmp.vue"
export default {
    components:{
        canvasCmp
    },
    props: {
        cmdInfo: { type: Object, default: {} },
        devInfo:{ type: Object, default: {} },
        cmdIdx : {},
    },
    data() {
        return {
            x1 : this.cmdInfo.x1 || "",
            y1 : this.cmdInfo.y1 || "",
            iftype : this.cmdInfo.iftype || "",
            ifHeightFix : this.cmdInfo.ifHeightFix || 0,
            ifreg : this.cmdInfo.ifreg || "",
            remark : this.cmdInfo.remark || "",
            ifInclude : this.cmdInfo.ifInclude || true,
            iffix : this.cmdInfo.iffix || 2,
            colors : this.cmdInfo.colors || [],
            level : this.cmdInfo.level || 0,
            timer : null,
            typeList:[
                {name:"颜色点",value:"color",x1:true,y1:true,colors:true,iffix:true,ifHeightFix:true,type:"point"},
                {name:"颜色段",value:"colors",x1:true,y1:true,colors:true,iffix:true,ifHeightFix:true,type:"line"},
                {name:"当前应用",value:"activity",ifreg:true,ifInclude:true}
            ],
            isMatch: 0,
            desc: "",
            operWait: this.cmdInfo.operWait || 2000,
            getColor: []
        };
    },
    inject: ['doDevCmd','doNextCmd','addCmd',"getImgData","getDevPic","getCurApp"],
    computed:{
        selType(){
            var type = {};
            type = this.typeList.find((item)=>{
                return item.value==this.iftype
            })
            type = type || {};
            return type;
        }
    },

    mounted() {
    },

    methods: {
        addSubCmd(){
            this.addCmd({type:"",level:this.level+1},this.cmdIdx+1);
        },
        setByDevInfo(){
            this.x1 = this.devInfo.clickX || "";
            this.y1 = this.devInfo.clickY || "";
            if(this.iftype=="color"){
                if(this.devInfo.color) this.colors = JSON.parse(JSON.stringify(this.devInfo.color));
            }else if(this.iftype=="colors"){
                if(this.devInfo.colors) this.colors = JSON.parse(JSON.stringify(this.devInfo.colors));
            }
        },
        preView(){
            this.devInfo.clickX = this.x1;
            this.devInfo.clickY = this.y1;
            if(this.iftype=="colors"){
                this.devInfo.clickRX = this.x1+this.colors.length;
                this.devInfo.clickRY = this.y1;
            }
        },
        saveCmd(){
            this.cmdInfo.x1 = this.x1;
            this.cmdInfo.y1 = this.y1;
            this.cmdInfo.iftype = this.iftype;
            this.cmdInfo.ifHeightFix = this.ifHeightFix;
            this.cmdInfo.iffix = this.iffix;
            this.cmdInfo.ifreg = this.ifreg;
            this.cmdInfo.remark = this.remark;
            this.cmdInfo.ifInclude = this.ifInclude;
            this.cmdInfo.colors = this.colors;
            this.cmdInfo.operWait = this.operWait;
        },
        initCmd(){
            this.isMatch = 0;
            this.desc = "";
            this.getColor = []
        },
        preCheck(){
            if(this.selType.x1 && !this.x1){
                this.$message.error("请输入X坐标")
                return false;
            }
            if(this.selType.y1 && !this.y1){
                this.$message.error("请输入Y坐标")
                return false;
            }
            if(this.iftype===""){
                this.$message.error("请选择判断类型")
                return false;
            }
            return true;
        },
        runCmd(){
            if(!this.preCheck()){
                this.$emit("stopRun")
                return;
            }
            this.doCheck()

        },
        doSucc(){
            this.$emit("stopRun")
            this.isMatch = 1;
            this.doNextCmd({idx: this.cmdIdx+1,level: this.level+1,limitLevel: true});
        },
        doFail(){
            this.$emit("stopRun")
            this.isMatch = 2;
            this.doNextCmd({finish:true});
        },
        stopCmd(){
            clearTimeout(this.sTimer);
            this.$emit("stopRun")
        },
        doCheck(){
            this.isMatch = 0;
            this.desc = "";
            if(this["doCheck"+this.selType.value]){
                this["doCheck"+this.selType.value].call(this);
            }else{
                this.doFail();
            }
        },
        doCheckcolor(){
            var that = this;
            var fixheight = that.ifHeightFix || 0;
            fixheight = fixheight*1;
            var starty = that.y1-fixheight;
            var endy = that.y1+fixheight;
            var mindiff = 100000;
            for(var i=starty;i<=endy;i++){
                var arr = that.getImgData(that.x1,i);
                if(arr.length>0){
                    var diff =0 ;
                    that.colors.map((item,idx)=>{
                        if(arr[idx]){
                            diff+= Math.abs(item - arr[idx])
                        }
                    })
                    if(diff<mindiff){
                        mindiff = diff;
                        that.desc = `x:${that.x1} y:${i} 误差:${mindiff}`
                        that.getColor = arr;
                    }
                    if(diff<=that.iffix){
                        that.doSucc();
                        break;
                    }else if(i==endy){
                        that.doFail()
                        break;
                    }
                }else{
                    that.$message.error("获取画布失败");
                    break;
                }
            }
        },
        doCheckcolors(){
            var that = this;
            var fixheight = that.ifHeightFix || 0;
            var starty = that.y1-fixheight;
            var endy = that.y1+fixheight;
            var mindiff = 100000;
            for(var i=starty;i<=endy;i++){
                var arr = that.getImgData(that.x1,i,that.colors.length);
                if(arr.length>0){
                    var diff =0 ;
                    var len = that.colors.length;
                    that.colors.map((pitem,pidx)=>{
                        pitem.map((item,idx)=>{
                            if(arr[pidx][idx]){
                                diff+= Math.abs(item - arr[pidx][idx])
                            }
                        })
                    })
                    if(diff<mindiff){
                        mindiff = diff;
                        that.desc = `x:${that.x1} y:${i} 误差:${mindiff}`
                        that.getColor = arr;
                    }
                    if(diff<=(that.iffix*len)){
                        that.doSucc()
                        break;
                    }else if(i==endy){
                        that.doFail()
                        break;
                    }
                }else{
                    that.$message.error("获取画布失败")
                    break;
                }
            }
            
        },
        doCheckactivity(){
            var that = this;
            var app = that.devInfo.curApp;
            
            var reg = eval('/^.*'+that.ifreg+'.*$/');
            if(app.match(reg)){
                if(that.ifInclude){
                    that.doSucc()
                }else{
                    that.doFail()
                }
            }else{
                if(that.ifInclude){
                    that.doFail()
                }else{
                    that.doSucc()
                }
            }

        }
        
    }
}
</script>

<style lang="less" scoped>
    .cmdcfg{
        display: inline-block;
    }
</style>
